<template>
  <div>
    <div class="form-div" style="margin:10px;padding:5px;background: white;">
      <!--          表单区域-->
      <a-table   v-model:dataSource="tableDataSource" :columns="TableColumns" v-model:pagination="pagination">
        <!-- 操作列 -->
        <template #action="{ text, record }">
          <!-- 只有当 record.status 等于 '未审核' 时，才显示审核按钮 -->
          <a-button v-if="record.status === '未审核'" @click="showStatusModal(record)">审核</a-button>
        </template>

      </a-table>
    </div>
    <!-- 修改状态的模态框 -->
    <a-modal v-model:visible="statusModalVisible" title="审核" @ok="handleStatusSubmit" @cancel="statusModalVisible = false">
      <div>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="selectedStatus">
            <a-radio-button value="通过">通过</a-radio-button>
            <a-radio-button value="不通过">驳回</a-radio-button>
          </a-radio-group>
        </a-form-item>

      </div>
    </a-modal>
  </div>

</template>
<script setup lang="ts">
import {TableColumns} from "./labBorrowCheck.data";
import {onMounted, reactive, ref} from "vue";
import {list, updateStatus} from "./labBorrowCheck.api";

//表单数据
const tableDataSource = reactive([])
//保存搜索的信息
const searchFormState = reactive({});
// 分页配置
const pagination=reactive( {
  pageSize: 10, // 每页显示的条数
  showSizeChanger: true, // 是否可以改变每页显示的条数
  pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
  showQuickJumper: true, // 是否可以快速跳转到指定页
  showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
  current: 1, // 当前页数
  total:0, // 总条数
  onChange: null // 页码改变时的回调函数,稍后才将器填充进来
})
// 是否显示修改状态的模态框
const statusModalVisible = ref(false);
// 选中的状态
const selectedStatus = ref('');
// 维修描述
const repairDescription = ref('');
// 记录当前选中的记录
const selectedRecord = ref(null);

const reloadForm=async ()=>{
  const {code,message,data} =  await list(searchFormState,{pageNo:pagination.current,pageSize:pagination.pageSize});
  console.log(data)
  if(data!=null){
    const {records,current,total}= data
    //更新页面数据
    const totalPages = total/pagination.pageSize+1
    if(totalPages<current){
      pagination.current = 1
      await  reloadForm()
      return //阻止执行下面代码
    }
    pagination.total=total
    // 添加新记录到响应式数组
    tableDataSource.length=0
    records.forEach(record => {
      tableDataSource.push(record);
    });

  }
}
/**
 * 更换页码信息的时候显示
 * @param page
 * @param pageSize
 */
const handlePageChang=(page, pageSize)=>{//参数为改变后的页码和页码数量
  pagination.current=page
  pagination.pageSize=pageSize
  reloadForm()
}
/**
 * 进来数据加载
 */
onMounted(async () => {
  pagination.onChange=handlePageChang
  await reloadForm();

})

// 点击修改状态按钮，显示修改状态的模态框，并保存选中的记录
const showStatusModal = (record) => {
  selectedStatus.value = record.status;
  selectedRecord.value = record;
  statusModalVisible.value = true;
};


// 确认修改状态
const handleStatusSubmit = async () => {
  try {
    // 获取当前选中的记录
    const record = selectedRecord.value;
    console.log(selectedRecord);
    if (!record) {
      console.error('No record is selected.');
      return;
    }

    // 从record对象中获取报修单ID
    const id = record.id;

    // 调用更新状态的API，并传递报修单ID、选中的状态和维修描述
    const response = await updateStatus(id, selectedStatus.value, repairDescription.value);

    // 输出响应结果
    console.log(response);

    // 关闭修改状态的模态框
    statusModalVisible.value = false;
    await reloadForm()
  } catch (error) {
    console.error(error);
    // 在这里添加适当的错误处理逻辑
  }

};
</script>
